<template>
  <div>
    <van-nav-bar
        title="订单详情"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <!--    1.商品-->

    <div>
      <van-checkbox-group v-model="cks" ref="checkboxGroup"  @change="onChangeGroup">
        <van-swipe-cell v-for="(g,index) in carts" :key="index">
          <van-card
              :title="g.title"
          >
            <template #price>
              <span>总价：{{g.currentprice*g.num}}元</span>
            </template>
            <template #thumb>
              <van-row  align="center">
                <van-col span="6">
                  <van-checkbox :name="index" @click="xz"></van-checkbox>
                </van-col>
                <van-col span="18">
                  <van-image :src="g.imgurl"></van-image>
                </van-col>
              </van-row>
            </template>
            <template #tags>
              <van-stepper v-model="g.num" step="1" @change="update(g.num,g.id)"/>
              <p>加入时价格：{{ g.joinprice }}元,目前单价：{{g.currentprice}}元</p>
            </template>
          </van-card>
          <template #right>
            <van-button square text="删除" @click="del(g.id)" style="height: 100%" type="danger" class="delete-button" />
          </template>
        </van-swipe-cell>
      </van-checkbox-group>
    </div>
    <!--    2.底部统计-->
    <van-submit-bar :price="price" button-text="结算" @submit="tzorder">
      <van-checkbox v-model="checked" @click="qx">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>
<script>
export default {
  data(){
    return{
      carts:[],
      checked:false,
      cks:[],
      price:0.0,
      p:0,
      ids:[]
    }
  },mounted() {
    this.loadData();
    if(this.$store.state.token==0){
      this.$router.push("/m")
    };
  },methods:{
    //官网API上的change方法
    onChangeGroup(event){
      this.price = 0.0
      var list=[]
      for(var i in event){
        var a =parseFloat(this.carts[event[i]].currentprice * this.carts[event[i]].num);
        list.push(a);
        this.ids.push(this.carts[event[i]].id);
      }
      var m=0;
      for(var i in list){
        m=m+list[i];
      }
      this.price = m * 100;

    },
    qx(){
      this.$refs.checkboxGroup.toggleAll(this.checked);
    },xz(){
      if(this.$refs.checkboxGroup.children.length!=this.$refs.checkboxGroup.value.length){
        this.checked=false;
      }else {
        this.checked=true;
      }
    },tzorder(){
      console.log(this.ids);
      this.$router.push({path:"/order",query:{cids:this.ids}});
    },
    onClickLeft(){
      this.$router.push("/index")
    },
    loadData(){
      // 请求接口 Axios
      this.axios.get("/api/cart/my.do").then(res=>{
        if(res.data.code==200){
          this.carts=res.data.data;
          console.log(this.carts)
        }
      })
    },del(id){
      this.$dialog.confirm({
        title: '删除商品',
        message: '亲，你确定要删除吗',
      }).then(() => {
        //删除 请求接口
        this.axios.get("/api/cart/del.do?id="+id).then(res=>{
          if(res.data.code==200){
            this.$toast("删除成功！");
            this.loadData();
          }else {
            this.$toast("删除失败？");
          }
        })
      }).catch(() => {
        // on cancel
      });
    },
    update(val,id){
      //更改商品的数量
      this.axios.post("/api/cart/update.do",{id:id,num:val}).then(res=>{
        if(res.data.code!=200){
          this.$toast("亲，更改数量失败！");
        }
      })
    }
  }
}
</script>
<style>
.delete-button {
  height: 100%;
}
.goods-card {
  margin: 0;
  background-color: white;
}
.van-card__origin-price{
  text-decoration:none;
}
</style>